<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <div style="width: 100%;height: 100%;position: relative;margin-top: 20px">
    <div style="position: absolute;top:-43px; left: 110px;font-family: 'font1';font-size: 20px;">
      {{ title }}
    </div>
    <img
      style="z-index:0; height: 200px;width: 200px; position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);"
      src="../../assets/img/切图/环形图边缘发光效果.png">
    <Echart id="leftCenter" :options="options" class="left_center_inner" ref="charts"
      style="padding-left: 23px;padding-top: 13px;position: absolute;z-index:20;" />
    <modal :visible="dialogVisible" :maskClosable="true" @close="close">
      <div style=" width: 100%;display: flex;justify-content: center">
        <div
          style="font-size: 25px; border-bottom: 1px solid #ccc;   width: 450px;text-align: center;padding-bottom: 5px">
          {{ currentData.name }}
        </div>
      </div>
      <div style="height: 300px;width: 100%; padding:0 60px;box-sizing: border-box">
        <div style="font-size: 22px;color: white;font-family: 'font1';margin-top: 20px;margin-bottom: 10px">{{
          currentData.Title1}}</div>
        <div v-for="item in currentData.dataTitle1"
          style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;font-size: 20px">
          <div style="width: 350px;">{{ item.name }}</div>
          <div>{{ item.value }}</div>
          <div>{{ item.percent }}</div>
        </div>

        <div style="font-size: 22px;color: white;font-family: 'font1';margin-top: 20px;margin-bottom: 10px">{{
          currentData.Title2}}</div>
        <div v-for="item in currentData.dataTitle2"
          style="display: flex;justify-content: space-between;margin-bottom: 10px;align-items: center;font-size: 20px">
          <div style="width: 350px;">{{ item.name }}</div>
          <div>{{ item.value }}</div>
          <div>{{ item.percent }}</div>
        </div>

      </div>
    </modal>
  </div>
</template>

<script setup lang="ts">
import Echart from "@/components/echart/index.vue";
import Chart3D from "@/components/3dEcharts.vue";
import Modal from "@/components/modal/modal.vue";
import { nextTick, onMounted, ref } from "vue";


const { data, title, userInfo } = defineProps(['data', 'title', 'userInfo'])
const currentData = ref({});
const dialogVisible = ref(false);
const options = ref({});
const countUserNumData = ref({
  lockNum: 0,
  onlineNum: 0,
  offlineNum: 0,
  totalNum: 0
})
const charts = ref()

onMounted(() => {
  nextTick(() => {
    init()
  })
})
function close() {
  currentData.value = {};
  dialogVisible.value = false;
}

function init() {
  var total1 = 0;
  let total = data.reduce((pre, data) => {
    return pre + data.value
  }, 0);
  let colors = [data[0].label.shadowColor, data[1].label.shadowColor, data[2].label.shadowColor, data[3].label.shadowColor, data[4].label.shadowColor];
  let piedata = {
    name: "用户总览",
    type: "pie",
    radius: ["42%", "65%"],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 4,
      borderColor: "rgba(0,0,0,0)",
      borderWidth: 2,
    },

    color: colors,
    data: data,
  };
  options.value = {
    title: {
      // zlevel: 0,
      text: ["{value|" + total + "}"].join("\n"),
      top: "center",
      left: "center",
      textStyle: {
        rich: {
          value: {
            color: "#ffffff",
            fontSize: 24,
            fontWeight: "bold",
            lineHeight: 20,
          },
          name: {
            color: "#ffffff",
            lineHeight: 20,

          },
        },
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    legend: {
      show: false,
      top: "5%",
      left: "center",
    },
    series: [
      //展示圆点
      {
        ...piedata,
        tooltip: { show: true },
        label: {
          formatter: "{b|{b}} \n {per|{d}%}  ",
          //   position: "outside",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 14,
            },
            per: {
              color: "#31ABE3",
              fontSize: 14,
            },
          },
        },
        labelLine: {
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          show: true,

        },
        emphasis: {
          show: true,
        },
      },
      {
        ...piedata,
        tooltip: { show: true },
        itemStyle: {},
        label: {
          backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
          height: 0,
          width: 0,
          lineHeight: 0,
          borderRadius: 2.5,
          shadowBlur: 8,
          shadowColor: "auto",
          padding: [2.5, -2.5, 2.5, -2.5],
        },

        labelLine: {
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          show: false,
        },
      },
    ],
  };
  let myChart = charts.value.chart;
  myChart.on('click', params => {
    console.log(params, "params")
    currentData.value.name = params.name
    const current = userInfo.find(item => item.name == params.name);
    console.log(current, "current")
    if (!current) {
      alert("请在json文件中添加此用户的下钻数据")
      return
    }
    currentData.value = current;
    dialogVisible.value = true;
  })
}
</script>
<style lang='scss' scoped></style>